<script setup lang="ts">
// import { useMemberStore } from '@/stores'
// import type { LoginResult } from '@/types/member'
// import { Mcaptcha } from '@/utils/mcaptcha'
// import { onLoad, onReady } from '@dcloudio/uni-app'
// import { ref, reactive, onMounted, toRaw } from 'vue'
// import { useI18n } from 'vue-i18n'
// import { login } from '@/api/login'
// import { RSA_encryption, rsaEncryptSet, RSA_encryption1, md5Str } from '@/utils/index'
// import Rsa from '@/utils/rsa_s.js'
// let pages = getCurrentPages();

// const { t, locale } = useI18n()
// const timeNumber = ref(60)
// const isGetCode = ref(false)
// const showLanguage = ref(false) // 弹出语言窗
// const memberStore = useMemberStore()
// const popup = ref() // 弹窗ref
// const currentLanguage = ref<any>({})
// const languageList = reactive({
//   // zh_CN,en_US,th_TH,vi_VN
//   list: [
//     {
//       type: 'zh_CN',
//       name: t('loginIndex.Chinese'),
//       id: '1',
//       icon: '../../static/image/china-icon.png',
//     },
//     {
//       type: 'en_US',
//       name: t('loginIndex.English'),
//       id: '2',
//       icon: '../../static/image/english-icon.png',
//     },
    // {
    //   type: 'French',
    //   name: t('loginIndex.French'),
    //   id: '3',
    //   icon: '../../static/image/french-icon.png',
    // },
    // {
    //   type: 'Japan',
    //   name: t('loginIndex.Japanese'),
    //   id: '4',
    //   icon: '../../static/image/japanese-icon.png',
    // },
    // {
    //   type: 'Korean',
    //   name: t('loginIndex.Korean'),
    //   id: '5',
    //   icon: '../../static/image/Korean-icon.png',
    // },
//   ],
// }) // 语言列表

// // 获取 code 登录凭证
// let code = ''
// onLoad(async () => {
  // console.log('options -- : ', options)
  // var queryString = window.location.search;
  // queryString = queryString.substring(1);
  // var params = queryString.split('&');
  // var queryParams:any = {};
  // params.forEach(function(param) {
  //     var parts = param.split('=');
  //     queryParams[parts[0]] = parts[1];
  // });
  // console.log(' - - > ', queryParams);
// })

// // 获取用户手机号码
// const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {

// }

// const loginSuccess = (profile: LoginResult) => {
//   // 保存用户信息
//   memberStore.setProfile(profile)
//   // 成功提示
//   // uni.showToast({ icon: 'success', title: '登录成功' })
//   setTimeout(() => {
//     // 页面跳转
//     uni.switchTab({ url: '/pages/index/index' })
//     //uni.navigateBack()
//   }, 100)
// }

// // #ifdef H5 || APP-PLUS
// const myForm = ref()
// const formArea = ref<{ account: string; password: string; googleCode: string }>({
//   account: 'adminone',
//   password: 'adminone',
//   googleCode: '',
// })
// // 定义校验规则
// const rules: UniHelper.UniFormsRules = {
//   account: {
//     rules: [{ required: true, errorMessage: t('loginIndex.tipphone') }],
//   },
//   password: {
//     rules: [{ required: true, errorMessage: t('loginIndex.tippassword') }],
//   },
//   googleCode: {
//     rules: [{ required: true, errorMessage: t('loginIndex.googlevertifyCode') }],
//   },
// }
// const mcaptcha = ref() // 验证码
// onReady(() => {
//   //   mcaptcha.value = new Mcaptcha({
//   //     el: 'canvas',
//   //     width: 90,
//   //     height: 40,
//   //     createCodeImg: '',
//   //   })
// })
// // 刷新验证码
// const updateImageCode = () => {
//   mcaptcha.value.refresh()
// }
// onMounted(() => {
//   let lang = memberStore.language
//   if (lang) {
//     currentLanguage.value = toRaw(languageList.list).find((item) => item.type === lang)
//   }
//   // let params = {
//   //   langguage: memberStore.language,
//   //   timestamp: 'test data',
//   //   sign: 'sign data',
//   //   data: 'data data',
//   //   userId: 'userId data',
//   //   token: 'token data',
//   //   deviceId: 'deviceId data',
//   // }
//   // // RSA_encryption1(params)

//   // let res = Rsa.encrypt(params)
//   // let request_id = +new Date();
//   // let m5 = md5Str(request_id)
//   // console.log('Rsa.encrypt 333:', m5)
// })
// // 提交前校验图形验证码

// // 表单提交

// const onSubmit = async () => {
//   uni.switchTab({ url: '/pages/index/index' })
// }
// // 请先阅读并勾选协议
// const isAgreePrivacy = ref(false)
// const isAgreePrivacyShakeY = ref(false)
// const checkedAgreePrivacy = async () => {

// }

// const onOpenPrivacyContract = () => {
//   // #ifdef MP-WEIXIN
//   // 跳转至隐私协议页面
//   wx.openPrivacyContract({})
//   // #endif
// }

// // 下一步
// const nextCb = () => {
// }

// // 选择语言
// const selectLan = () => {
//   popup.value.open('bottom')
// }
// const changePopup = (e) => {
//   console.log('当前模式：' + e.type + ',状态：' + e.show)
// }
// const closePopup = () => {
//   popup.value.close()
// }
// // 选择语言
// const changeLanguage = (item) => {
//   currentLanguage.value = item
//   memberStore.setLanguage(item.type)
//   // uni.setStorageSync('language', item.type)
//   // i18n.locale = item.type
//   uni.$emit('i18nChange')
//   popup.value.close()
//   // #ifdef H5
//   window.location.reload()
//   // #endif
//   // #ifdef MP-WEIXIN || APP-PLUS
//   uni.reLaunch({ url: '/pages/login/loginPass' })
//   // #endif
// }
// // 修改图片颜色
// const imgPath = (path: string) => {
//   const platform = process.env.VUE_APP_PLATFORM
//   return platform == 'h5' ? `../../static/image/${path}` : `@/static/image/${path}`
// }
</script>
<template>
  <view class="viewport">
    <!-- <view class="login_txt_wrap">
      <view class="login_subtxt">{{ t('camera.hintTip') }} </view>
      <view class="image_user_wrap flexR">
        <image class="image_user" mode="widthFix" src="@/static/image/GcashValidFace.jpg"></image>
      </view>
      <view class="login_subtxt-">{{ t('camera.hintsubTip') }} </view>
    </view>
    <view class="login">
      <view class="next-wrap flexR">
        <view class="next-btn" @click="nextCb">{{ t('camera.hintBtn') }}</view>
      </view>
      <uni-popup ref="popup" background-color="#fff" @change="changePopup">
        <view class="popup-content">
          <view class="popup-content-head flexR">
            <view class="head-txt"> {{ t('loginIndex.languageChange') }} </view>
            <image
              @click="closePopup"
              class="image_close_"
              mode="'widthFix'"
              :src="imgPath('close_icon.png')"
            ></image>
          </view>
          <view class="list-wrap">
            <view class="language-list" :key="item.id" v-for="(item, indx) in languageList.list">
              <view
                class="language-item flexR"
                :class="{ active: item.id === currentLanguage.id }"
                @click="() => changeLanguage(item)"
              >
                <view class="item-lef">
                  <image class="image_coun" mode="'widthFix'" :src="item.icon"></image>
                  <text class="item-lef-txt">{{ item.name }}</text>
                </view>
                <image
                  v-if="item.id === currentLanguage?.id"
                  class="image_coun_select"
                  mode="'widthFix'"
                  src="@/static/image/lang_select_icon.png"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </uni-popup>
    </view> -->
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20rpx 40rpx;
  background: #ffffff;
}
.btn_verification {
  display: inline-flex;
  padding: 30rpx;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
  width: 40%;
  height: 104rpx;
  line-height: 104rpx;
  border-radius: 20rpx;
  text-align: center;
  background: #1773ff;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
}
.time-num {
  font-size: 32rpx;
  font-weight: 600;
  color: #999999;
}
.form-bet {
  justify-content: space-between;
}
.image_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}
.login_txt_wrap {
  position: relative;
  z-index: 2;
  margin-top: 50rpx;
}
.login_txt {
  color: #0a2f4d;
  font-family: 'Alibaba PuHuiTi 3.0';
  font-size: 70rpx;
  font-weight: bolder;
  height: 98rpx;
  line-height: 98rpx;
}
.login_subtxt {
  height: 28rpx;
  line-height: 42rpx;
  font-family: 'PingFang SC';
  font-size: 24rpx;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.3rpx;
  color: rgba(0, 0, 0, .85);
}
.select_lan {
  margin-bottom: 50rpx;
  justify-content: flex-start;
}
.image_lan {
  width: 28rpx;
  height: 28rpx;
  margin-left: 5rpx;
}
.login {
  display: flex;
  flex-direction: column;
  margin-top: 0rpx;
  padding: 10rpx 20rpx 20rpx;
  .input_wrap {
    width: 100%;
    height: 104rpx;
    line-height: 104rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    border: 1px solid #ddd;
    padding-left: 30rpx;
    margin-bottom: 10rpx;
    border-radius: 20rpx;
    border: 2rpx solid #eaeaea;
    background: #f0f5f9;
  }

  /* .next-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 90rpx;
  } */
  .next-btn {
    width: 650rpx;
    height: 90rpx;
    border-radius: 48rpx;
    background: #1773ff;
    text-align: center;
    box-shadow: 0 18px 48px 0 #0000001a, 0 22px 48px 0 #00000014;
    color: #ffffff;
    font-family: 'PingFang SC';
    font-size: 32rpx;
    font-style: normal;
    font-weight: 600;
    line-height: 90rpx;
    margin-top: 30rpx;
  }

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    color: #fff;

    .icon {
      font-size: 40rpx;
      margin-right: 6rpx;
    }
  }

  .phone {
    background-color: #019aff;
  }
  .wechat {
    background-color: #06c05f;
  }

  .extra {
    flex: 1;
    padding: 70rpx 70rpx 0;

    .caption {
      width: 440rpx;
      line-height: 1;
      border-top: 1rpx solid #ddd;
      font-size: 26rpx;
      color: #999;
      position: relative;

      text {
        transform: translate(-40%);
        background-color: #fff;
        position: absolute;
        top: -12rpx;
        left: 50%;
      }
    }

    .options {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 70rpx;

      button {
        padding: 0;
        background-color: transparent;

        &::after {
          border: none;
        }
      }
    }

    .icon {
      font-size: 24rpx;
      color: #444;
      display: flex;
      flex-direction: column;
      align-items: center;

      &::before {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 6rpx;
        font-size: 40rpx;
        border: 1rpx solid #444;
        border-radius: 50%;
      }
    }

    .icon-weixin::before {
      border-color: #019aff;
      color: #019aff;
    }
  }
  .input_wrap_ {
    width: 55%;
    margin-bottom: 0;
  }
}

.form-item-image {
  .uni-forms-item__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .image-code {
      width: 55%;
      display: inline-block;
    }

    .code-img-wrapper {
      display: inline-block;
    }
  }
}

@keyframes animate__shakeY {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -5rpx);
  }

  100% {
    transform: translate(0, 0);
  }
}

.animate__shakeY {
  animation: animate__shakeY 0.2s ease-in-out 3;
}
.popup-content {
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
}
.popup-content-head {
  height: 124rpx;
  position: relative;
  border-bottom: 2rpx solid #eaeaea;
}
.head-txt {
  color: #07133b;
  text-align: center;
  font-family: 'PingFang SC';
  font-size: 34rpx;
  font-style: normal;
  font-weight: 500;
}
.image_close_ {
  position: absolute;
  top: 36rpx;
  right: 30rpx;
  width: 48rpx;
  height: 48rpx;
}
.button-privacy-wrap {
  position: relative;

  .button-opacity {
    opacity: 0;
    position: absolute;
    z-index: 1;
  }
}
.image_coun {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}
.list-wrap {
  padding-bottom: 200rpx;
}
.item-lef-txt {
  color: #0a2f4d;
  font-family: 'PingFang SC';
  font-size: 32rpx;
  font-weight: 400;
}
.language-item {
  width: calc(100% - 40rpx);
  height: 120rpx;
  margin-left: 40rpx;
  padding-right: 40rpx;
  border-bottom: 2rpx solid #eaeaea;
  justify-content: space-between;
}
.image_coun_select {
  width: 40rpx;
  height: 40rpx;
  margin-right: 0rpx;
}
.tips {
  position: absolute;
  bottom: 80rpx;
  left: 20rpx;
  right: 20rpx;
  font-size: 22rpx;
  color: #999;
  text-align: center;
  .radio {
    transform: scale(0.6);
    margin-right: -4rpx;
    margin-top: -4rpx;
    vertical-align: middle;
  }
  .link {
    display: inline;
    color: #019aff;
  }
}
.image_user {
  width: 150rpx !important;
  height: 150rpx !important;
  /* border: 2px solid #1e80ff; */
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 50%;
}
.login_subtxt- {
  font-size: 23rpx;
  color: #666;
  margin-bottom: 30rpx;
}

</style>

